<template>
	<view class="shopping">
		<view class="header">
			门店列表
		</view>
		<view class="seacher">
			<view class="inp">
				<input type="text" v-model="query.key" placeholder="搜索关键字">
				<image src="https://s1.ax1x.com/2022/11/23/z3RvRK.png" mode="" @click="sea(query.key)"></image>
			</view>
			<view class="sifting">
				<input type="text" v-model="query.services" placeholder="筛选">
				<image src="https://s1.ax1x.com/2022/11/23/z3hAv8.png" mode=""></image>
			</view>
		</view>
		<view class="list">
			<ul v-for="item in list" :key="item.id">
				<li>
					<image v-if="!item.logo" src="https://s1.ax1x.com/2022/11/23/z3LrtS.png" mode=""></image>
					<image v-else :src="IMGURL+item.logo" mode=""></image>
					<view class="txt">
						<text class="name">{{item.name}}</text>
						<text class="two">{{item.services}}</text>
						<view class="btn" @click="go(item.id)">
							查看详情
						</view>
					</view>
				</li>
			</ul>
		</view>
		<view class="btm">
		</view>
	</view>
</template>

<script>
	import {
		shoplist,
		shoplistone
	} from '../utils/api.js'
	import {
		IMG
	} from '../utils/cofing.js'
	console.log(IMG);
	export default {
		data() {
			return {
				list: [],
				token: uni.getStorageSync("token"),
				counts: 0,
				query: {
					page: 1,
					psize: 5,
					key: '',
					services: ''
				},
				IMGURL: IMG
			}
		},
		onLoad() {
			this.getshoplist()
		},
		methods: {
			// 获取商家列表
			async getshoplist() {
				uni.showToast({
					title: "加载中",
					icon: 'loading',
				})
				let res = await shoplist(this.query)
				console.log(res);
				if (res.errCode == 10000) {
					this.list = [...this.list, ...res.data.list]
					this.counts = res.data.counts
					uni.hideToast()
				}
				uni.stopPullDownRefresh()
			},
			go(id) {
				console.log(id);
				uni.navigateTo({
					url: `shopDetail?id=${id}`
				})
			},
			sea() {
				this.getshoplist()
			}
		},
		onPullDownRefresh() {
			this.query.page = 1
			this.list = []
			this.getshoplist()
		},
		onReachBottom() {
			this.query.page++
			this.getshoplist()
			if (this.query.page * this.query.psize >= this.counts) {
				return uni.showToast({
					title: '数据加载完毕'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.shopping {
		width: 100%;
		background-color: #f1f5f8;
	}

	.header {
		width: 750rpx;
		height: 95rpx;
		background-color: #fff;
		// margin-left: 10rpx;
		text-align: center;
		line-height: 120rpx;
		font-size: 38rpx;
	}

	.seacher {
		width: 750rpx;
		height: 145rpx;
		background-color: #fff;
		display: flex;

		.inp {
			width: 365rpx;
			height: 88rpx;
			position: relative;
			margin-top: 33rpx;
			margin-left: 30rpx;

			image {
				width: 35rpx;
				height: 35rpx;
				position: absolute;
				top: 31rpx;
				right: 0;
			}

			input {
				width: 365rpx;
				height: 88rpx;
				border-radius: 50rpx;
				background-color: #f4f6f6;
				padding: 0 35rpx 0 20rpx;
				font-size: 25rpx;
			}
		}

		.sifting {
			width: 171rpx;
			height: 88rpx;
			position: relative;
			margin-top: 33rpx;
			margin-left: 25rpx;

			image {
				width: 35rpx;
				height: 35rpx;
				position: absolute;
				top: 31rpx;
				left: 220rpx;
			}

			input {
				width: 171rpx;
				height: 88rpx;
				border-radius: 50rpx;
				background-color: #f4f6f6;
				padding: 0 35rpx;
				font-size: 25rpx;
				margin-left: 60rpx;
			}
		}

	}

	.list ul li {
		width: 730rpx;
		height: 230rpx;
		margin-top: 24rpx;
		margin-left: 10rpx;
		background-color: #fff;
		display: flex;

		image {
			width: 192rpx;
			height: 205rpx;
			margin-top: 20rpx;
			margin-left: 18rpx;
			margin-right: 24rpx;
			border-radius: 5rpx;
		}

		.txt {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			width: 360rpx;
			height: 175rpx;
			margin-top: 33rpx;

			.name {
				font-size: 32rpx;

			}

			.two {
				font-size: 26rpx;
				color: #bbbbbb;
				margin-top: 29rpx;
			}

			.btn {
				width: 123rpx;
				height: 40rpx;
				background-color: #5eadf0;
				color: #fff;
				font-size: 20rpx;
				text-align: center;
				line-height: 40rpx;
				border-radius: 8rpx;
				margin-top: 30rpx;
			}
		}
	}

	.btm {

		width: 100%;
		height: 150rpx;
		background-color: #f1f5f8;
	}
</style>
